<template>
  <section ref="main">
    <header>
      <svg class="icon" aria-hidden="true" @click="showMeun">
        <use xlink:href="#icon-caidan"></use>
      </svg>
      <h3>Giraffe</h3>
      <svg class="icon" aria-hidden="true" @click="goSurvey">
        <use xlink:href="#icon-bianji"></use>
      </svg>
    </header>
    <v-touch tag="div" class="cards" v-on:swipeleft="swipeLeft"
    v-on:swiperight="swipeRight">
      <transition-group name="list-complete"
      class="wrapper" tag="div" id="cards">
        <section v-for="(value, index) in myTaskList" :key="index" class="card"
        :style="[value.imgUrl !== '' ? 
        value.status !== -1 ? {backgroundImage: 'url(http://47.97.102.73/giraffe/'+value.imgUrl + ')'} : {backgroundImage: value.imgUrl}
         : {backgroundColor: 'rgba(0, 0, 0, 0.5)'}]">
          <div class="welcome" v-if="value.status === -1">
            <p class="title">{{title}}</p>
            <p class="des">{{des}}</p> 
          </div>
          <div class="hang" v-if="value.status === 0">
            <p class="title">{{value.surveyName}}</p>
            <p class="earn">赚取￥{{value.money}}</p>
            <div class="go-wrapper">
              <div class="go-go" @click="goQuestion(value.surveyId)">Go</div>
            </div>
            <div class="info">
              <div class="left">
                <div class="limit">{{value.personNum}}</div>
                <div class="desc">可答题人数</div>
              </div>
              <div class="center"></div>
              <div class="right">
                <div class="time">{{value.preFinishTime}}</div>
                <div class="desc">估计完成时间</div>
              </div>
            </div>
            <svg class="icon" aria-hidden="true" @click="hide(index)">
              <use xlink:href="#icon-untitled94"></use>
            </svg>
          </div>
          <div class="done" v-if="value.status === 1">
            <p class="title">{{value.surveyName}}</p>
            <p class="earn">赚取￥{{value.money}}</p>
            <div class="go-wrapper">
              <div class="go-done">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-sggg"></use>
                </svg>
              </div>
            </div>
            <div class="info">
              <div class="finish">
                <div class="time">{{value.preFinishTime}}</div>
                <div class="desc">完成时间</div>
              </div>
            </div>
            <div class="icon"></div>
          </div>
          <!-- <div class="ad" v-if="value.status === 2">
            <p class="title">{{value.title}}</p>
            <div class="bg" :style="{backgroundImage: `url(${value.bgUrl})`}"></div>
            <div class="logo"><img :src="value.logoUrl"></div>
            <p class="desc">{{value.desc}}</p>
            <a :href="value.link">链接链接>></a>
            <div class="btn">
              <div>按钮按钮按钮</div>
            </div>
          </div> -->
        </section>
      </transition-group>
    </v-touch>
  </section>
</template>

<script>
import {findMyTask} from '@/api/survey'
import {check} from '@/api/common'

export default {
  name: 'homeIndex',
  props: [
    'card'
  ],                                          // 父组件传的值
  data () {
    return {
      cardNow: 0,                             // 当前显示
      vuegConfig: {
        disable: false,
        forwardAnim: 'fadeInLeft',
        backAnim: 'fadeInRight'
      },                                       // vugd动画效果
      myTaskList: [
        {
          imgUrl: 'url(/static/images/welcomeBg.png)',
          money: 0,
          preFinishTime: 0,
          status: -1,
          surveyId: 0,
          surveyName: '',
          personNum: 0
        }
      ],
      title: '欢迎!',
      des: '随时点击右上角编辑按钮创建你的第一次调查吧'
    }
  },
  computed: {
    cardsLength () {
      return this.myTaskList.length - 1
    }                                         // 所有的问卷数组长度
  },
  beforeCreate () {
  },
  created () {
    this.initData()
  },
  methods: {
    hide (index) {
      this.$emit('hide', index)
    },                                        // 隐藏当前问卷
    showMeun () {
      this.$emit('showMeun')
    },                                        // 显示菜单
    goSurvey () {
      this.$emit('goSurvey')
    },                                        // 创建问卷
    swipeLeft () {
      if (this.cardNow < this.cardsLength) {
        this.cardNow++
        this._transCard()
      }
    },                                        // 左滑
    swipeRight () {
      if (this.cardNow > 0) {
        this.cardNow--
        this._transCard()
      }
    },                                        // 右滑
    _transCard () {
      let distance = -92.5 * this.cardNow
      document.getElementById('cards').style.transform = `translateX(${distance}vw)`
    },                                        // 滑动
    goQuestion (id) {
      this.$router.push({
        name: 'question',
        params: {id: id}
      })
    },                                         // 进入题目页答题
    initData () {
      let formData = {
        data: {
          uid: localStorage.uid
        },
        token: localStorage.token
      }
      findMyTask(JSON.stringify(formData)).then((data) => {
        var result = check(data)
        if (typeof (result) === 'boolean') {
          if (data.data.data.length !== 0) {
            this.myTaskList = data.data.data
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.hide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -9;
  width: 0;
  height: 0;
}
header {
  flex: none;
  width: 100%;
  height: 98px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  h3 {
    font-size: 48px;
    color: #5d331e;
  }
}
.icon {
  width: 44px;
  height: 44px;
  padding: 0 30px;
  cursor: pointer;
  color: #937200;
}
.cards {
  width: 100%;
  overflow: hidden;
  padding-bottom: 20px;
  flex: 1;
  display: flex;
  justify-content: flex-start;
}
.wrapper {
  padding-right: 2.5vw;
  margin-left: 2.5vw;
  flex: none;
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.6s;
  // transform: translateX(-92.5vw);
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  width: 90vw;
  margin-left: 2.5vw;
  border-radius: 10px;
  background-size: cover;
  transition: all 0.5s;
}
.welcome {
  flex: 1;
  .title {
    font-size: 48px;
    margin-top: 80px;
    text-align: center;
  }
  .des {
    font-size: 36px;
    color: #5a5a5a;
    text-align: center;
    max-width: 55vw;
    margin: 0 auto;
  }
}
.hang,
.done {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  .icon {
    color: #fff;
    align-self: flex-end;
    transform: translateY(-20px);
  }
  .share {
    align-self: flex-start;
    transform: translateY(20px);
  }
  .title {
    flex: none;
    color: #fff;
    font-size: 48px;
    max-width: 572px;
    line-height: 70px;
    text-align: center;
    font-weight: lighter;
    margin-top: 125px;
  }
  .earn {
    flex: none;
    color: #fce520;
    font-size: 40px;
    font-weight: lighter;
    margin-top: 35px;
  }
  .go-wrapper {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .go-go {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 270px;
    height: 270px;
    background-color: #fff;
    border-radius: 50%;
    font-size: 84px;
    color: #4d4d4d;
    font-weight: lighter;
  }
  .go-done {
    width: 258px;
    height: 258px;
    border: 6px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      width: 150px;
      height: 150px;
      transform: translateY(-40%);
    }
  }
  .info {
    flex: none;
    width: 100%;
    margin-bottom: 130px;
    height: 130px;
    display: flex;
    justify-content: space-around;
    .time,
    .limit {
      font-size: 96px;
      color: #fff;
      font-weight: lighter;
    }
    .right {
      transform: translate(-40px, -20px);
    }
    .left {
      transform: translate(40px, -20px);
    }
    .finish {
      transform: translateY(-20px);
    }
    .center {
      border-left: 4px solid #fff;
    }
    .time::after {
      content: 's'
    }
    .desc {
      text-align: center;
      opacity: 0.5;
      font-size: 24px;
      color: #fff;
    }
  }
}
.ad {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  .title {
    flex: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #000;
    color: #fff;
    height: 81px;
    font-size: 30px;
    text-align: center;
    width: 100%;
    line-height: 81px;
  }
  .bg {
    flex: none;
    width: 100%;
    height: 250px;
    background-size: cover;
  }
  .logo {
    flex: none;
    height: 275px;
    width: 275px;
    position: relative;
    margin: 0 auto;
    transform: translateY(-50%);
    box-shadow: 0px 0px 18px 0px rgba(4, 0, 0, 0.4);
    img {
      height: 100%;
      width: 100%;
    }
  }
  .desc {
    flex: none;
    transform: translateY(-50px);
    margin: 0 auto;
    font-size: 30px;
    line-height: 45px;
    color: #666;
    text-align: center;
    width: 500px;
  }
  a {
    transform: translateY(-40px);
    color: #006eff;
    font-size: 30px;
    line-height: 45px;
  }
  .btn {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    div {
      flex: none;
      width: 580px;
      height: 160px;
      background-color: #ca8308;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 50px;
      font-size: 36px;
      border-radius: 12px;
    }
  }
}
.list-complete-leave-to {
  opacity: 0;
}
.list-complete-leave-active {
  position: absolute;
  height: 100%;
}
</style>
